import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ShowStockDetail = ({ code }) => {
  const [stockData, setStockData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchStockData = () => {
      if (!code) {
        setError('No stock code provided');
        return;
      }

      const payload = {
        code: code
      };

      console.log("获得的股票代码是：", code);

      axios.post('/api/stock/stock_detail', payload)
        .then(response => {
          if (response.data.msg === 'ok') {
            setStockData(response.data.data);
          } else {
            setError('Failed to fetch stock details');
          }
          console.log("获得的Detail数据是：", response.data.data);
        })
        .catch(error => {
          setError('Error fetching stock details: ' + error.message);
        });
    };

    fetchStockData(); // 初始调用一次获取数据

    const intervalId = setInterval(fetchStockData, 60000); // 每60000毫秒（1分钟）调用一次

    return () => {
      clearInterval(intervalId); // 组件卸载时清除定时器
    };
  }, [code]); // 依赖数组中的 code 变化时重新设置定时器

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!stockData) {
    return <div>Loading...</div>;
  }

  return (
    <div style={{ fontFamily: 'Arial', padding: '20px', maxWidth: '800px', margin: 'auto', position: 'relative' }}>
        <div style={{ borderBottom: '2px solid black', paddingBottom: '10px', marginBottom: '10px', textAlign: 'left' }}>
          <h1 style={{ fontSize: '30px', fontWeight: 'bold' }}>{stockData['股票名称']} ({stockData['股票代码']})</h1>
        </div>
        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
          <div style={{ width: '25%', textAlign: 'center' }}>
            <div style={{ marginBottom: '20px', fontSize: '27px', fontWeight: 'bold', color: 'red' }}>{stockData['最高']}</div>
            <div style={{ fontSize: '15px' }}>{stockData['获取时间']}</div>
          </div>
          <div style={{ position: 'absolute', top: '110px', bottom: '20px', left: '28%', width: '2px', backgroundColor: 'black' }}></div>
          <div style={{ width: '68%', marginLeft: '2%' }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
              <span style={{ fontSize: '21px', width: '33%' }}>今开: {stockData['今开']}</span>
              <span style={{ fontSize: '21px', width: '33%' }}>昨收: {stockData['昨收']}</span>
              <span style={{ fontSize: '21px', width: '33%' }}>最高: {stockData['最高']}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
              <span style={{ fontSize: '21px', width: '33%' }}>最低: {stockData['最低']}</span>
              <span style={{ fontSize: '21px', width: '33%' }}>涨停: {stockData['涨停价']}</span>
              <span style={{ fontSize: '21px', width: '33%' }}>跌停: {stockData['跌停价']}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <span style={{ fontSize: '21px', width: '50%' }}>成交量（手）: {stockData['成交量（手）']}</span>
              <span style={{ fontSize: '21px', width: '50%' }}>均价: {stockData['均价']}</span>
            </div>
          </div>
        </div>
    </div>
  );
};

export default ShowStockDetail;














// import React, { useState, useEffect } from 'react';
// import axios from 'axios';

// const ShowStockDetail = ({ code }) => {
//   const [stockData, setStockData] = useState(null);
//   const [error, setError] = useState(null);

//   useEffect(() => {
//     if (!code) {
//       setError('No stock code provided');
//       return;
//     }

//     const payload = {
//       code: code
//     };

//     console.log("获得的股票代码是：", code);

//     axios.post('/api/stock/stock_detail', payload)
//     //axios.get('/detail_stock.json')  // 假设您有一个可以调用的后端 API
//       .then(response => {
//         if (response.data.msg === 'ok') {
//           setStockData(response.data.data);
//         } else {
//           setError('Failed to fetch stock details');
//         }
//         console.log("获得的数据是：", response.data.data)
//       })
//       .catch(error => {
//         setError('Error fetching stock details: ' + error.message);
//       });
//   }, [code]);

//   if (error) {
//     return <div>Error: {error}</div>;
//   }

//   if (!stockData) {
//     return <div>Loading...</div>;
//   }

//   return (
//     <div style={{ fontFamily: 'Arial', padding: '20px', maxWidth: '800px', margin: 'auto', position: 'relative' }}>
//         <div style={{ borderBottom: '2px solid black', paddingBottom: '10px', marginBottom: '10px', textAlign: 'left' }}>
//           <h1 style={{ fontSize: '30px', fontWeight: 'bold' }}>{stockData['股票名称']} ({stockData['股票代码']})</h1>
//         </div>
//         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
//           <div style={{ width: '25%', textAlign: 'center' }}>
//             <div style={{ marginBottom: '20px', fontSize: '27px', fontWeight: 'bold', color: 'red' }}>{stockData['最高']}</div>
//             <div style={{ fontSize: '15px' }}>{stockData['获取时间']}</div>
//           </div>
//           {/* 在这里修改垂直线的高度，最后估计还要修改 */}
//           <div style={{ position: 'absolute', top: '110px', bottom: '20px', left: '28%', width: '2px', backgroundColor: 'black' }}></div>
//           <div style={{ width: '68%', marginLeft: '2%' }}>
//             <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
//               <span style={{ fontSize: '21px', width: '33%' }}>今开: {stockData['今开']}</span>
//               <span style={{ fontSize: '21px', width: '33%' }}>昨收: {stockData['昨收']}</span>
//               <span style={{ fontSize: '21px', width: '33%' }}>最高: {stockData['最高']}</span>
//             </div>
//             <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '10px' }}>
//               <span style={{ fontSize: '21px', width: '33%' }}>最低: {stockData['最低']}</span>
//               <span style={{ fontSize: '21px', width: '33%' }}>涨停: {stockData['涨停价']}</span>
//               <span style={{ fontSize: '21px', width: '33%' }}>跌停: {stockData['跌停价']}</span>
//             </div>
//             <div style={{ display: 'flex', justifyContent: 'center' }}>
//               <span style={{ fontSize: '21px', width: '50%' }}>成交量（手）: {stockData['成交量（手）']}</span>
//               <span style={{ fontSize: '21px', width: '50%' }}>均价: {stockData['均价']}</span>
//             </div>
//           </div>
//         </div>
//     </div>
//   );
// };

// export default ShowStockDetail;











